<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
</head>
<body>
   <input type="button" value="红色" onclick="color('red')">
   <input type="button" value="黄色" onclick="color('yellow')">
   <input type="button" value="粉色" onclick="color('pink')">
<!--    <button>红色</button>    -->
    <input type="color" onchange="diy(this)">
    <script>
       function color(e){
           document.querySelector("body").style.background = e;
       }
        function diy(c){
            color(c.value);
        }
    </script>
     
    
<!--
    <script>
        var but = document.querySelector("button");
        var by = document.querySelector("body");
           but.onclick=function(){
               by.style.background = "red";
           }
    </script>
-->
</body>
</html>